<div class="element-header<%= ' has-hint' if element.has_hint? %>">
  <span class="element-handle">
    <% if element.definition.blank? %>
      <%= hint_with_tooltip Alchemy.t(:element_definition_missing), icon_class: "element-icon" %>
    <% elsif element.deprecated? %>
      <%= hint_with_tooltip element.deprecation_notice, icon_class: "element-icon" %>
    <% else %>
      <span class="element-icon">
        <%= element.definition.icon_file %>
      </span>
    <% end %>
    <%= render_icon(:draggable, style: false, fixed_width: false, class: "handle-icon") %>
  </span>
  <span class="element-title">
    <span class="preview_text_element_name"><%= element.display_name %></span>
    <%= render_hint_for(element, size: "1x", fixed_width: false) %>
    <span class="preview_text_quote">
      <%= sanitize(element.preview_text.presence || '&nbsp;') %>
    </span>
  </span>
  <span class="element-hidden-icon">
    <%= render_icon("cloud-off", size: "1x") %>
    <span class="element-hidden-label">
      <%= Alchemy.t(:element_hidden) %>
    </span>
  </span>
  <sl-tooltip content="<%= Alchemy.t(element.folded? ? :show_element_content : :hide_element_content) %>">
    <%= button_tag(class: "element-toggle") do %>
      <% if element.compact? %>
        <%= render_icon "more-2" %>
      <% else %>
        <%= render_icon element.folded? ? "arrow-left-s" : "arrow-down-s" %>
      <% end %>
    <% end %>
  </sl-tooltip>
</div>
